<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		.wrap{width: 288px;height: 210px;border:1px solid red;margin: 20px auto;}
		.wrap>ul>li{width: 70px;height: 70px;float: left;border:1px solid black;list-style: none;}
		.wrap li>div{width: 24px ;height: 24px;border:1px solid red;margin:10px auto;background: url(index.png) 0 0;}
	</style>
	
</head>
<body>
	<div class="wrap">
		<ul>
			<li><div></div><span></span></li>
			<li><div></div><span></span></li>
			<li><div></div><span></span></li>
			<li><div></div><span></span></li>
			<li><div></div><span></span></li>
			<li><div></div><span></span></li>
			<li><div></div><span></span></li>
			<li><div></div><span></span></li>
			<li><div></div><span></span></li>
			<li><div></div><span></span></li>
			<li><div></div><span></span></li>
			<li><div></div><span></span></li>
		</ul>

	</div>
</body>
</html>